<template>
<div id="domains-edit">
  <Modal v-model="modal.visible" :title="modal.title" footer-hide>
    <IForm :key="modal.visible" :model="edit" :elem="domainsElem" :rules="domainsRule"  :loading="loading.form"
           :btn-loading="loading.btn" :width="360" :label-width="80"
           submitText="确定" button button-text="取消"
           @on-submit="handleSubmit" @on-click="modal.visible = false" />
    <!-- IForm -->
  </Modal>
</div>
</template>
<script>
import {
  _editUser // 创建编辑
} from "@/services/manage/users";
export default {
  name: "DomainsEdit",
  data() {
    return {
      modal: {
        title: "",
        visible: false
      },
      edit: {
        key: "",
        domain: "",
        birth: ""
      },
      init: "",
      loading: {
        form: false,
        btn: false
      },
      domainsElem: [
        {
          label: "域标识",
          prop: "key",
          placeholder: "输入域唯一标识"
        },
        {
          label: "域",
          prop: "domain",
          placeholder: "输入域名称",
          number: true
        },
        {
          label: "过期时间",
          prop: "exp_time",
          placeholder: "选择过期",
          element: "date"
        },
      ],
      domainsRule: {
        key: [
          {
            required: true,
            message: "标识为必须项",
            trigger: "blur"
          }
        ],
        domain: [
          {
            required: true,
            message: "域名称为必须项且为字符串",
            trigger: "blur",
            type: "string"
          }
        ],
        exp_time: [
          {
            required: true,
            message: "过期时间为必选项",
            trigger: "change",
            type: "date"
          }
        ],
      }
    };
  },
  mounted() {
    this.init = Object.assign({}, this.edit); // 复制初始表单数据
  },
  methods: {

    handleModal(title,action,row) {
      this.modal = {
        title: title,
        visible: true
      };
      this.loading.form = true; // 表单加载状态
      if (action === "Create") {
        this.handleCreate(); // 创建
      } else {
        this.handleEdit(row); // 编辑
      }
    },
    handleCreate() {
      this.edit = Object.assign({}, this.init);
      this.loading.form = false
    },
    handleEdit(row) {
      // 模拟异步请求(获取详情)
      setTimeout(() => {
        const edit = Object.assign({}, row);
        const birth = row.birth
          ? this.$Utils.formatDate.parse(row.birth, "yyyy-MM-dd")
          : "--";
        let city;
        for (const key of Object.keys(row.city)) {
          city = key;
        }
        const hobby = [];
        for (const key of Object.keys(row.hobby)) {
          hobby.push(key);
        }
        this.edit = {
          ...edit,
          city,
          birth,
          hobby
        };
        this.handlePatch(); // 获取补丁数据
      }, 800);
    },
    handleSubmit() {
      this.$Loading.start();
      this.loading.btn = true;
      const payload = this.edit;
      payload.birth = this.$Utils.formatDate.format(
        new Date(payload.birth),
        "yyyy-MM-dd"
      );
      console.log(this.edit)
      console.log(payload.birth)

      // 模拟异步请求(编辑 Or 新增)
      setTimeout(() => {
        _editUser(payload)
          .then(res => {
            this.$Message.success(res.error.msg);
            this.$emit("on-update");
            this.$Loading.finish();
            this.loading.btn = false;
            this.modal.visible = false;
          })
          .catch(() => {
            this.$Loading.error();
            this.loading.btn = false;
            this.modal.visible = false;
          });
      }, 500);
    }

  }
};
</script>
<style lang="postcss" scoped>
</style>
